<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test api</title>
<link rel="stylesheet" type="text/css" href="../../css/simple.css" charset="utf-8" />
<script src="../../scripts/raphael.js"></script>
<script src="../../scripts/FormUtil.js" charset="utf-8"></script>
<script src="../../scripts/util2.js"></script>
<script src="../../scripts/2dcanvas.js"></script>
<script src="map.js"></script>

<script>
var area;

var width = 150;
var height = 150;

var seatw = 40;
var seath = 40;

var tt,tt2,tt3;

function initArea(){
	area = new CanvasHallArea('area1', width, height);
	area.onselect = function(rect){
		
		rect.width += area.cellWidth*2;
		rect.height += area.cellHeight*2;
		rect.x -= area.cellWidth;
		rect.y -= area.cellHeight;
		
		var list = area.getSelected(rect);
		for(var i=0; i<list.length; i++){
			var sofa = list[i];
			if(sofa){
				sofa.selected  = !sofa.selected;
				sofa.repaint();
			}
		}
	}
	
	area.onmousein = function(sofa){
		var x = sofa.x+area.viewMargin+area.cellWidth;
		var y = sofa.y+area.viewMargin+area.cellWidth;
		var w = sofa.width;
		var h = sofa.height;
		area.markHead(x, y, w, h, true);
		//showTipMenu();
		clearTimeout(tt2); tt2 = Js.delayExec(showTipMenu, 500, sofa);
	}

	area.onmouseout = function(sofa){
		var x = sofa.x+area.viewMargin+area.cellWidth;
		var y = sofa.y+area.viewMargin+area.cellWidth;
		var w = sofa.width;
		var h = sofa.height;
		area.markHead(x, y, w, h, false);
		hideTipMenu();
	}
	
	///////////
	area.cellWidth = seatw;
	area.cellHeight = seath;
	
	area.repaint();
	area.onmove = function (e){
		clearTimeout(tt);
		//tt = Js.delayExec(moveMenu, 120, e);
		tt3 = Js.delayExec(showRule, 120, e);
	};
}

function test(){
	var subRegions = area.subRegions;
	for(var i=0;i<subRegions.length;i++){
		var region = subRegions[i];
		Js.log(region);
		for(var j=0;j<region.items.length;j++){
			
		}
	}
	var sofa = area.getPointItem({x:105,y:105});
	
	Js.log(sofa);
	
	sofa.selected  = !sofa.selected;
	sofa.repaint();
	
	for(var i=0;i<area.yRuler.length;i++){
		var text = area.yRuler[i];
		Js.log(text.attr('y'));
	}
	
	_showRule(sofa, true);
}

var lastPointSofa = null;

function showRule(e){
	var pos = DomUtil.getOffset(e, area.container);
	pos.x = pos.offsetX - (area.viewMargin+area.cellWidth);
	pos.y = pos.offsetY - (area.viewMargin+area.cellWidth);
	var sofa = area.getPointItem(pos);

	document.title=('pos.x='+pos.x+',pos.y='+pos.y);
	_showRule(lastPointSofa, false);
	if(sofa){
		_showRule(sofa, true);
		lastPointSofa = sofa;
	}
}

function _showRule(sofa, show){
	if(!sofa)return;
	var x = sofa.x+area.viewMargin+area.cellWidth;
	var y = sofa.y+area.viewMargin+area.cellHeight;
	var w = sofa.width;
	var h = sofa.height;
	area.markHead(x, y, w, h, show);
}

function showTipMenu(sofa){
    var menu = $E('popupMenu');
    menu.innerHTML = '<br/>'+sofa.toString();
    menu.style.display = '';
}

function hideTipMenu(){
    var menu = $E('popupMenu');
    menu.style.display = 'none';
}

function moveMenu(e){
	e = window.event||e;
    var menu = $E('popupMenu');
    menu.style.left = ((e.clientX+1)+'px');
    menu.style.top = ((e.clientY+1)+'px');
}

function showGrid(){
	area.drawGrid();
}

function showGrid2(){
	var t = new Date().getTime();
	area.fillItems(Cell, {virtual:true});
	area.repaint();
	t = new Date().getTime()-t;
	var bi = Browser.getInfo();
	Js.log('time='+t);
}

function addSofa(){
	var sofa = new Sofa();
	area.addToGrid(sofa, 1, 1);
	sofa.repaint();
	
	sofa = new Sofa();
	sofa.selected = true;
	sofa.virtual = true;
	area.addToGrid(sofa, 1, 2);
	sofa.repaint();
}

function createSelectedSofa(){
 	for(id in area.itemMap){
		var sofa = area.itemMap[id];
		if(sofa&& sofa.selected && sofa.virtual){
			sofa.status = 'IDLE';
			sofa.virtual=false;
			sofa.repaint();
		}
	}
}

function delSelected(){
 	for(id in area.itemMap){
		var sofa = area.itemMap[id];
		if(sofa && sofa.selected){
			area.remove(sofa);
		}
	}
}

function repaint(){
	area.repaint();
}

function zoom(rate){
	area.zoom(rate);
}

function moveSofa(){
	
}

function resizeArea(){
	area.width = 1600;
	area.height = 1200;
	area.repaint();
}

function addCols(){
	area.width += area.cellWidth;
	area.height += area.cellHeight;
	area.repaint();
	area.fillItems(Cell, {virtual:true});
	area.repaint();
}

function addRows(){
	
}

function onGlobalKeydown(e){
	e = window.event||e;
	if((e.keyCode==27)){
		showGrid2();
	}
}

function load(){
	initArea();Js.log(DomUtil.elementsFromPoint(10,10));
	//showGrid2();
}

</script>
<style>
	button{
		display:block;
	}
</style>
</head>

<body onload="load()" onkeydown="return onGlobalKeydown(event)">
	<div id="popupMenu" style="background-color:#0ff; position:absolute;z-index:100">xxxx</div>
    
	<div>
	    <div class="fl">
	    	<button onclick="initArea()">initArea</button>
	    	<button onclick="showGrid()">showGrid</button>
	    	<button onclick="showGrid2()">showGrid2</button>
	    	<button onclick="addSofa()">addSofa</button>
	    	<button onclick="createSelectedSofa()">createSelectedSofa</button>
	    	<button onclick="delSelected()">delSelected</button>
	    	<button onclick="repaint()">repaint</button>
	    	<button onclick="zoom(0.8)">zoom-</button>
	    	<button onclick="zoom(1.2)">zoom+</button>
	    	<button onclick="moveSofa()">moveSofa</button>
	    	<button onclick="resizeArea()">resizeArea</button>
	    	<button onclick="addCols()">addCols</button>
	    	<button onclick="addRows()">addRows</button>
	    	<button onclick="test()">test</button>
	    </div>
		<div class="fl">
	        <div id="area1" style="border: 1px solid #00f;width:1000px;height:800px;overflow:auto;" class="disableSelect"></div>
	    </div>
	</div>
    
</body>
</html>
